﻿
<div class="bui-page">
	<header class="bui-bar">
		<div class="bui-bar-left">
            <a class="bui-btn btn-back"><i class="icon-back"></i></a>
		</div>
		<div class="bui-bar-main">表单元素</div>
		<div class="bui-bar-right">
		</div>
	</header>
	<main>
		
		<h3 class="section-title">利用title属性在右边增加文本</h3>

<input type="checkbox" class="bui-choose" name="sex2" value="1" title="羽毛球" checked>
<input type="checkbox" class="bui-checkbox" name="sex2" value="1" title="台球">
		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<input type="checkbox" class="bui-choose" name="sex2" value="1" title="羽毛球">
			 		</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">利用label标签来自定义</h3>

		<h3 class="section-title">单选框 bui-radio</h3>

<label><input type="radio" class="bui-radio" name="sex" value="1" checked>男</label>
<label><input type="radio" class="bui-radio" name="sex" value="2">女</label>
		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<input type="radio" class="bui-radio" 
 name="sex" value="1">
			 		</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">多选框 bui-checkbox</h3>

<label><input type="checkbox" class="bui-checkbox" name="sex2" value="1">羽毛球</label>
<label><input type="checkbox" class="bui-checkbox" name="sex2" value="2">台球</label>
		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<input type="checkbox" class="bui-checkbox" 
    name="sex2" value="1">
			 		</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">单选 bui-choose</h3>

<label><input type="radio" class="bui-choose" name="choose" value="1" checked>男</label>
<label><input type="radio" class="bui-choose" name="choose" value="2">女</label>
		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<input type="radio" class="bui-choose" 
    name="choose" value="1">
			 		</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">多选 bui-choose</h3>

<label><input type="checkbox" class="bui-choose" name="choose" value="1" checked>男</label>
<label><input type="checkbox" class="bui-choose" name="choose" value="2">女</label>
		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<input type="checkbox" class="bui-choose" 
    name="choose" value="1">
			 		</xmp>
				</div>
			</div>
		</div>


		<h3 class="section-title">自定义多选单选 bui-check</h3>
		<div class="bui-fluid">
			<div class="span4">
				<div class="bui-check">
					<input id="money1" type="checkbox" checked><label for="money1">50元</label>
				</div>
			</div>
			<div class="span4">
				<div class="bui-check">
					<input id="money2" type="checkbox"><label for="money2">100元</label>
				</div>
			</div>
			<div class="span4">
				<div class="bui-check">
					<input id="money3" type="checkbox"><label for="money3">200元</label>
				</div>
			</div>
		</div>
		
		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<div class="bui-check">
  <input id="money1" type="checkbox">
  <label for="money1">50元</label>
</div>
			 		</xmp>
				</div>
			</div>
		</div>
		
		<h3 class="section-title">喜欢 bui-like</h3>
		
<input type="checkbox" class="bui-like" name="like" value="2">
		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<input type="checkbox" class="bui-like"
    name="like" value="2">
			 		</xmp>
				</div>
			</div>
		</div>
        <h3 class="section-title">切换器 bui-switch</h3>
<label><input type="checkbox" class="bui-switch" name="interest" value="1" >开启</label>

        <div class="bui-panel">
            <div class="bui-panel-head">示例: </div>
            <div class="bui-panel-main">
                <div class="container">
                    <xmp>
<input type="checkbox" class="bui-switch"
    name="interest" value="1">开启
                    </xmp>
                </div>
            </div>
        </div>
		<h3 class="section-title">切换器 bui-switch-text</h3>
<label><input type="checkbox" class="bui-switch-text" name="interest2" value="1" uncheck="OFF" check="ON" ></label>

		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<input type="checkbox" class="bui-switch-text" name="interest2" value="1" uncheck="OFF" check="ON">
			 		</xmp>
				</div>
			</div>
		</div>
		
		<h3 class="section-title">滑动条 bui-range</h3>
<input type="range" class="bui-range" min="0" max="255" value="200">

		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<input type="range" class="bui-range"
    min="0" max="255" value="200">
			 		</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">系统自带日期 bui-date</h3>
<input type="date" class="bui-date">

		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<input type="date" class="bui-date" >
			 		</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">input框</h3>
		<div class="bui-input">
			<i class="icon-search"></i><input type="text" value="" placeholder="请输入关键字"><i class="icon-remove"></i>
		</div>
		
		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<div class="bui-input">
  <i class="icon-search"></i>
  <input type="text" value="" placeholder="请输入关键字">
  <i class="icon-remove"></i>
</div>
			 		</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">搜索条</h3>
		<div class="bui-searchbar">
			<div class="bui-input">
				<i class="icon-search"></i>
				<input type="text" value="" placeholder="请输入关键字"><i class="icon-remove"></i>
			</div>
		</div>

		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<div class="bui-searchbar">
  <div class="bui-input">
    <i class="icon-search"></i>
    <input type="text" value="" placeholder="请输入关键字"><i class="icon-remove"></i>
  </div>
</div>
			 		</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">搜索条-带文字</h3>

		<div class="bui-searchbar bui-box">
			<div class="span1">
				<div class="bui-input">
					<i class="icon-search"></i>
					<input type="text" value="" placeholder="请输入关键字"><i class="icon-remove"></i>
				</div>
			</div>
			<div class="btn-search">搜索</div>
		</div>

		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<div class="bui-searchbar bui-box">
	<div class="span1">
		<div class="bui-input">
			<i class="icon-search"></i>
			<input type="text" value="" placeholder="请输入关键字"><i class="icon-remove"></i>
		</div>
	</div>
	<div class="btn-search">搜索</div>
</div>
			 		</xmp>
				</div>
			</div>
		</div>
		<h3 class="section-title">搜索条-带条件</h3>

		<div class="bui-searchbar">
            <div class="bui-input">
                <div id="uiDropdown" class="bui-dropdown" style="width:120px;">
                    <div class="bui-btn bui-box">
                        <div class="span1">条件</div>
                        <i class="icon-dropdown"></i>
                    </div>
                    <ul class="bui-list bui-menu-bottom">
                        <!-- 默认激活第一个 -->
                        <li class="bui-btn" value="11">
                            列表1
                        </li>
                        <li class="bui-btn" value="22">
                            列表2
                        </li>
                        <li class="bui-btn" value="33">
                            列表3
                        </li>
                    </ul>
                </div>
                <input type="text" placeholder="请输入关键字搜索" value="">
                <i class="icon-search"></i>
            </div>
        </div>

		<div class="bui-panel">
			<div class="bui-panel-head">示例: </div>
			<div class="bui-panel-main">
				<div class="container">
					<xmp>
<div class="bui-searchbar">
    <div class="bui-input">
        <div class="bui-dropdown" style="width:2rem;">
            <div class="bui-btn bui-box">
                <div class="span1">条件</div>
                <i class="icon-dropdown"></i>
            </div>
            <ul class="bui-list bui-menu-bottom">
                <!-- 默认激活第一个 -->
                <li class="bui-btn" value="11">
                    列表1
                </li>
                <li class="bui-btn" value="22">
                    列表2
                </li>
                <li class="bui-btn" value="33">
                    列表3
                </li>
            </ul>
        </div>
        <input type="text" placeholder="请输入关键字搜索" value="">
        <i class="icon-search"></i>
    </div>
</div>
			 		</xmp>
				</div>
			</div>
		</div>
	</main>
</div>